<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
      <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
			<!-- 账户流水 -->
			<div class="table-form">
				<h2 class="lietou-detail-h1"></h2>
				<el-form ref="form" :inline="true" label-width="90px" size="small" style="margin-bottom:20px;">
					<el-form-item label="手机号" label-width="70px">
						<el-input placeholder="请输入手机号" v-model="searchPhone" maxlength="11" clearable class="search-input"></el-input>
					</el-form-item>
          <el-form-item label="名称" label-width="70px">
						<el-input placeholder="请输入名称" v-model="username" clearable class="search-input"></el-input>
					</el-form-item>
					<el-form-item label="处理状态" class="search-bar">
						<el-select placeholder="请选择" v-model="status" style="width: 90px;">
						    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item style="margin:-2px 0 0 10px;">
						<el-button icon="el-icon-search" @click="searchData" class="buttonStyle">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable" style="width: 100%;"
				 :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'54px'}"
				 :highlight-current-row="true">
					<el-table-column fixed type="index" label="序列" width="90" column-key="id" align="center"></el-table-column>
					<el-table-column prop="usertel" label="充值账号" align="center"></el-table-column>
					<el-table-column prop="cname" label="公司名称" align="center"></el-table-column>
					<el-table-column align="center" label="打款凭证" width="150">
						<template slot-scope="scope">
							<el-image style="width: 80px;" :src="scope.row.repic" :preview-src-list="scope.row.repicList" :z-index="10000"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="money" label="充值金额(元)" align="center"></el-table-column>
					<el-table-column prop="recharge_flow" label="流水号/拒绝原因" align="center"></el-table-column>
					<el-table-column prop="create_time" label="充值日期" align="center"></el-table-column>
					<el-table-column align="center" label="操作" width="300">
						<template slot-scope="scope">
							<div v-if="scope.row.recharge_type==1">
								<el-button slot="reference" size="small" type="primary" class="handle-btn" @click="onConfirm(scope.row.id)">审核通过</el-button>
								<el-button slot="reference" type="danger" size="small" class="handle-btn" @click="onRefuse(scope.row.id)">审核拒绝</el-button>
							</div>
							<span v-else>{{scope.row.cashtypeText}}</span>
						</template>
					</el-table-column>
				</el-table>
				<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
					<el-col :span="24" style="text-align:center;margin-top:50px">
						<el-pagination background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount" :current-page="pageNo"
						 @current-change="pageChange">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Breadcrumb from '@/components/Breadcrumb'
	export default {
		name: 'FinaceRecharge',
		components:{
			Breadcrumb
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				searchPhone:'',
				username:'',
				//审核状态-1 已取消 1 待审核 2 已审核 3 已拒绝
				statusList: [{ value: '', label: '全部' },
								{ value: '-1', label: '已取消' }, 
								{ value: '1', label: '待审核' }, 
								{ value: '2', label: '已审核' },
								{ value: '3', label: '已拒绝' }],
				status:'',
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10
			}
		},
		async created() {
			this.loadData();
		},
		methods:{
			// 搜索
			searchData(){
				this.pageNo=1;
				this.loadData();
			},
			//分页
			pageChange(val) {
			  this.pageNo = val;
			  this.loadData()
			},
			async loadData() {
			  const loading = this.$loading({
				 lock: true,
				 text: 'Loading',
				 spinner: 'el-icon-loading',
				 background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
				let data = {
						"token": this.token,
						"mobile": this.searchPhone,
						"username": this.username,
						"rechargetype": this.status,
						"recharge_status": '', //充值方式 alipay weixin xianxia 空或者0是全部	xianxia
						"p": this.pageNo, //分页页码
						"size": this.pageSize, //分页每页数量
				 }
				 let res = await this.$http({
					url: '/man/pay/getRechargeList',
					method: 'post',
					params: data
				 });
				 res.data.forEach(item => {
					item.repicList = item.repic.split();
				 	//审核状态-1 已取消 1 待审核 2 已审核 3 已拒绝
				 	if (item.recharge_type == -1) {
				 		item.cashtypeText = '已取消';
				 	} else if (item.recharge_type == 1) {
				 		item.cashtypeText = '待审核';
				 	} else if (item.recharge_type == 2) {
				 		item.cashtypeText = '已审核';
				 	} else if (item.recharge_type == 3) {
				 		item.cashtypeText = '已拒绝';
				 	}
				 })
				 this.tableData = res.data;
				 this.pageCount = res.max_page; //总页数
				 this.pageNo = Number(res.p); //当前页 size当前页
				 loading.close();
			  } catch (e) {
				 console.log(e)
				 loading.close();
			  }
			},
			// 审核通过
			onConfirm(id) {
				this.$prompt('是否确定通过审核？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					// inputPattern: /^\w+$/,
					inputPattern: /^[0-9a-zA-Z_-]+$/,
					inputPlaceholder: '请输入充值流水号',
					inputErrorMessage: '流水号只能是数字、字母、-和下划线',
					closeOnClickModal: false
				}).then(({ value }) => {
					this.shenheHandle(2, id, value);
				}).catch(error => {
			
				})
			},
			onRefuse(id) {
				this.$prompt('是否确定审核被拒？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputValidator: (val) => {
						return val != '' && val != null ? true : false
					},
					inputPlaceholder: '请输入审核被拒原因',
					inputErrorMessage: '请输入审核被拒原因',
					closeOnHashChange: false,
					closeOnClickModal: false
				}).then(({ value }) => {
					this.shenheHandle(3, id, value);
				}).catch(error => {
			
				})
			},
			// 审核操作
			async shenheHandle(done, id, value) {
				try {
					let res = await this.$http({
						url: '/man/pay/shenheRecharge',
						method: 'post',
						params: {
							"token": this.token,
							"id": id,
							"recharge_type": done, //审核状态 2 已通过 3 已拒绝	2
							"recharge_flow": value
						}
					});
					this.$message({
						type: 'success',
						message: res.msg
					});
					this.loadData();
				} catch (e) {
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail{
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;

		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}

	}
	.el-button.buttonStyle{
	  height: 32px;
	  font-size: 14px;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  background:#3674FF;
	  border-radius: 5px;
	  border:0;
	  margin-left:6px;
	  margin-top:2px;
	}
	.el-button.buttonStyle2{
	  font-size: 14px;
	  border-radius: 5px;
	  margin-left:15px;
	}
	.lietou-detail-head{
		background-color: #fff;
		margin:0 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;

		.lietou-msg{
			width:280px;
			display: flex;
			margin-left:30px;
		}
		.works{
			position: absolute;
			top:20px;
			right:30px;
			color: rgba(33, 120, 241, 1);
		}
		.lietou-number{
			border-left:1px #ddd solid;
			padding-left:30px;
			margin-top:30px;
		}
		.lahei-btn{
			position: absolute;
			right:30px;
			top:25px;
		}
		.acount{
			margin:0 0 20px 30px;
			padding-top:8px;

			span{
				margin-right:50px;
			}
		}
		.answerTable{
			margin:10px auto;
			width: 96%;
		}
		.acount-balance{
			font-size:36px;
			font-weight: 500;
		}
		.submit-btn{
			display: block;
			margin-top:-5px;
		}
	}
	.table-form{
		background-color: #fff;
		padding:0 20px 20px;
	}
	.lietou-detail-h1{
		font-size:17px;
		line-height: 20px;
		font-weight: bold;
		padding:5px 0 5px;
	}
	.search-bar{
		::v-deep{
			.el-form-item__label{
				font-weight: 500;
			}
		}
	}
  .handle-btn{
    border-radius: 5px;
    margin:0 8px;
  }
</style>
<style>
	.el-message{
		top:120px !important;
	}
	.el-icon-circle-close{
		color:#ccc !important;
	}
</style>
